import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/gauge/lit-gauge-stage.ts"
import {GaugeStageProps} from "../../../echarts/gauge/lit-gauge-stage.ts";

const meta: Meta<GaugeStageProps> = {
    title: 'Echarts/LitGaugeStage',
    tags: ['autodocs'],
    render: (args: GaugeStageProps): TemplateResult => {
        return html`<lit-gauge-stage 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .thick=${args.thick}
            .color=${args.color}
            .min=${args.min}
            .max=${args.max}
            .unit=${args.unit}
            .value=${args.value}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        thick: { control: 'number' },
        value: { control: 'number' },
        min: { control: 'number' },
        max: { control: 'number' },
        unit: { control: 'text' },
        color: { control: 'object' },
    },
};

export default meta;
type Story = StoryObj<GaugeStageProps>;

export const Default: Story = {
    args: {
        chartId: 'basic-gauge-stage-chart',
        width: '800px',
        height: '600px',
        thick: 1,
        value: 52.5,
        min: 0,
        max: 100,
        unit: 'km/h',
        color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
        ]
    }
}